<style lang="scss" scoped>
    @import '../../css/training.scss';
    .title-secul{display: inline-block;overflow: hidden;vertical-align: middle;line-height: 42px; }
    .title-secul li{ float: left;height: 42px;margin-left: 15px;margin-right: 15px;cursor: pointer;}
    .title-secul li span{color: $mc1;}

    .exam-checkbox{display: inline-block; position: relative; border: 1px solid #dcdfe6; border-radius: 2px; box-sizing: border-box; width: 14px; height: 14px; background-color: #fff; z-index: 1; vertical-align: -2px; cursor: pointer;}
    .exam-checkbox.checked{background-color: #409eff; border-color: #409eff;}
    .exam-checkbox.checked:after{content: ''; width: 3px; height: 7px; border: #fff solid; border-width: 0 1px 1px 0; position: absolute; left: 4px; top: 1px; z-index: 2;
        -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); transform-origin: center;}
    .answer-one{word-break: break-all;white-space: normal;line-height: 30px;color: #ff9c5a;}
    .exam-test-list{text-align: center}


    .question-title{padding: 34px 0 0 0;}
    .question-item{padding: 16px 0 16px 24px;}
    .question-item>span{float: left;}
    .question-item>p{padding-left: 30px;}
    .per-box{padding: 0 0 0 24px;}
    .per-box>div{width: 94%;float: left;margin-top: 4px;}
    .per-box>span{text-align: right;width: 6%;float: left;}
    .q3-box{border:1px solid #eee;margin: 24px 0 0 24px;}
    .q3-head{padding: 18px 0;background: #fcfdff;border-bottom: 1px solid #eee;}
    .q3-name{display: inline-block;width: 12%;text-align: center;}
    .q3-body{padding: 18px 0;}
    .q3-body>span{display: inline-block;text-align: center;width: 12%;vertical-align: middle;}
    .q3-body>p{display: inline-block;width: 86%;vertical-align: middle;}
</style>
<style>
    .exam-test-list .el-table th{text-align: center;}
    .my-resource-input-box .el-input{width: 260px;}
</style>
<template>
    <section>

        <section class="breadcrumb-box clearfix">
            <el-breadcrumb separator=" > " class="fl">
                <el-breadcrumb-item >培训</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path: '/training/training-manage'}">培训管理</el-breadcrumb-item>
                <el-breadcrumb-item v-if="$route.meta">{{$route.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </section>

        <!--考试结果-->
        <section v-if="step==2">
            <section class="exam-result-box mt">
                <section>
                    <!--<el-button class="btn-active btn-or" v-model="detailsType" ><span>考生成绩</span></el-button>-->
                    <!--<el-button class="ml20 btn-or" v-model="detailsType" ><span>答题分析</span></el-button>-->
                    <el-button v-for="item,$index in tabList3" :class="{'btn-active': detailsType ==$index}" class="btn-or" v-model="detailsType" @click="tabDetailActive($index)"  :key="$index">{{item}}</el-button>
                </section>


                <section class="exam-result-num mt40 clearfix" v-show="detailsType == 0">
                    <section class="ern-list-out">
                        <section class="ern-list-in">
                            <p class="fs-20 colormcO">{{HeaderData.PassRateString}}</p>
                            <p class="fs-14 colormc2 mt20">通过率</p>
                            <p class="fs-12 colormc2 mt20"><span>通过人数{{HeaderData.PassNum}}</span><span class="ml20">考试人数 {{HeaderData.ExamNum	}}</span></p>
                        </section>
                    </section>
                    <section class="ern-list-out ml20">
                        <section class="ern-list-in">
                            <p class="fs-20 colormcO">{{HeaderData.AvgScore}}</p>
                            <p class="fs-14 colormc2 mt20">平均分</p>
                            <p class="fs-12 colormc2 mt20"><span>最高分 {{HeaderData.MaxScore}}</span><span class="ml20">最低分 {{HeaderData.MinScore}}</span></p>
                        </section>
                    </section>
                </section>
                <section class="result-status" v-show="detailsType == 0">
                    <span class="fs-14 result-status-left">筛选∶</span>

                    <!--<ul class="result-status-list clearfix ml">-->
                        <!--<li class="result-status-active fs-14" @click="doCheckList">全部</li>-->
                        <!--<li >-->
                            <!--<el-checkbox-group v-model="checkList" @change="getCheckList(checkList)">-->
                                <!--<el-checkbox v-for="one in kindList" :label="one.ResSubCateID" :key="one.ResSubCateID">{{one.CateName}}</el-checkbox>-->
                            <!--</el-checkbox-group>-->
                        <!--</li>-->

                    <!--</ul>-->
                    <ul class="title-secul">
                        <li>
                           <!-- <el-checkbox-group v-model="checkList" @change="getCheckList(checkList)">
                                <el-checkbox v-for="one in kindList" :label="one" :key="one">{{one}}</el-checkbox>
                            </el-checkbox-group>-->
                            <el-radio-group v-model="examStatus" @change="statusChange">
                                <el-radio  :label="-1">全部</el-radio>
                                <el-radio  :label="0">未考</el-radio>
                                <el-radio  :label="1">通过</el-radio>
                                <el-radio  :label="2">未通过</el-radio>
                            </el-radio-group>
                        </li>
                    </ul>
                    <!--<div class="search-box">-->
                        <!--<img class="search" src="http://jhsy-img.caizhu.com/sass/images/search.png" alt="">-->
                        <!--<input type="text" placeholder="搜索学员" v-model="searchContent">-->
                    <!--</div>-->
                    <div class="my-resource-input-box fr">
                        <el-input placeholder="搜索学员" v-model="searchContent" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="getExamResult()"></el-button>
                        </el-input>
                    </div>
                </section>
                <section class="exam-test-list" v-show="detailsType == 0">  <!--列表-->
                    <el-table :data="resultData">
                        <el-table-column label="序号" width="70">
                            <template slot-scope="one">
                                {{one.$index+1}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="Username" label="姓名"></el-table-column>
                        <el-table-column label="状态" >
                            <template slot-scope="one">
                                <span v-if="one.row.ExamStatus == 0">未考</span>
                                <span v-if="one.row.ExamStatus == 1">通过</span>
                                <span v-if="one.row.ExamStatus == 2">未通过</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="分数" >
                            <template slot-scope="one">
                                {{ one.row.ExamStatus != 0 ? one.row.GetScore : '-'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="排名" >
                            <template slot-scope="one">
                                {{ one.row.ExamStatus != 0 ? one.row.Rank : '-'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="用时(分钟)" >
                            <template slot-scope="one">
                                {{ one.row.ExamStatus != 0 ? one.row.CostTime : '-'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="交卷时间" width="180">
                            <template slot-scope="one">
                                {{one.row.ExamStatus!=0 ? one.row.SubmitTime : '-'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="详情">
                            <template slot-scope="one">
                                <template v-if="one.row.ExamStatus != 0">
                                    <el-button type="text" size="small" @click="showOneResult(one.row)">查看</el-button>
                                </template>
                                <template v-else>
                                    -
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                    <section class="fr pb20 pt20">
                        <span class="fs-14 colormc3">每页显示15条，共1页，1条记录</span>
                    </section>
                </section>

                <section v-show="detailsType==1"> <!--答题分析-->
                    <!--<ul>-->
                        <!--<li class="exam-question2">-->
                            <!--<div class="question-content">-->
                                <!--<p class="question-topic mt30">-->
                                    <!--<span>1</span>-->
                                    <!--<span>迟到几次不扣工资</span>-->
                                    <!--<span>【单选题】</span>-->
                                    <!--<span>（10分）</span>-->
                                <!--</p>-->
                                <!--<div class="question-options-box mt20">-->

                                    <!--<table  class="question-options2">-->
                                        <!--<tbody >-->
                                            <!--<tr  class="question-tr">-->
                                                <!--<td style="width: 100%;text-align: left;">-->
                                                    <!--<p class="fs-14">A <span class="ml20"></span>1次</p>-->
                                                    <!--<div class="question-progress-line">-->
                                                        <!--<el-progress :text-inside="true" :stroke-width="18" :percentage="90"></el-progress>-->
                                                        <!--<span class="ml20 mr20 fs-14">5</span>-->
                                                        <!--<span class="ml20 fs-14">90%</span>-->
                                                    <!--</div>-->
                                                <!--</td>-->

                                            <!--</tr>-->
                                            <!--<tr  class="question-tr">-->
                                            <!--<td style="width: 100%;text-align: left;">-->
                                                <!--<p class="fs-14">A <span class="ml20"></span>1次</p>-->
                                                <!--<div class="question-progress-line">-->
                                                    <!--<el-progress :text-inside="true" :stroke-width="18" :percentage="90"></el-progress>-->
                                                    <!--<span class="ml20 mr20 fs-14">5</span>-->
                                                    <!--<span class="ml20 fs-14">90%</span>-->
                                                <!--</div>-->
                                            <!--</td>-->

                                        <!--</tr>-->

                                        <!--</tbody>-->
                                    <!--</table>-->

                                <!--</div>-->
                            <!--</div>-->
                        <!--</li>-->

                        <!--<li class="exam-question2">-->
                            <!--<div class="question-content">-->
                                <!--<p class="question-topic mt30">-->
                                    <!--<span>1</span>-->
                                    <!--<span>迟到几次不扣工资</span>-->
                                    <!--<span>【单选题】</span>-->
                                    <!--<span>（10分）</span>-->
                                <!--</p>-->
                                <!--<div class="question-options-box mt20">-->

                                    <!--<table  class="question-options2">-->
                                        <!--<tbody >-->
                                            <!--<tr  class="question-tr">-->
                                                <!--<td style="width: 100%;text-align: left;">-->
                                                    <!--<p class="fs-14">A <span class="ml20"></span>1次</p>-->
                                                    <!--<div class="question-progress-line">-->
                                                        <!--<el-progress :text-inside="true" :stroke-width="18" :percentage="90"></el-progress>-->
                                                        <!--<span class="ml20 mr20 fs-14">5</span>-->
                                                        <!--<span class="ml20 fs-14">90%</span>-->
                                                    <!--</div>-->
                                                <!--</td>-->
                                            <!--</tr>-->
                                            <!--<tr  class="question-tr">-->
                                            <!--<td style="width: 100%;text-align: left;">-->
                                                <!--<p class="fs-14">A <span class="ml20"></span>1次</p>-->
                                                <!--<div class="question-progress-line">-->
                                                    <!--<el-progress :text-inside="true" :stroke-width="18" :percentage="90"></el-progress>-->
                                                    <!--<span class="ml20 mr20 fs-14">5</span>-->
                                                    <!--<span class="ml20 fs-14">90%</span>-->
                                                <!--</div>-->
                                            <!--</td>-->

                                        <!--</tr>-->

                                        <!--</tbody>-->
                                    <!--</table>-->

                                <!--</div>-->
                            <!--</div>-->
                        <!--</li>-->
                    <!--</ul>-->
                    <div class="paper-box">
                        <template v-for="item,index in list">
                            <div class="question-title">Q{{index+1}}【{{item.QuestionType==2?'单选题':item.QuestionType==1?'多选题':'主观题'}}】{{item.QuestionTitle}}</div>
                            <ul v-if="item.QuestionType!=3">
                                <template v-for="res,index1 in item.Answers">
                                    <li>
                                        <div class="question-item clearfix"><span>{{answerArr[index1]}}</span><p class="res-box">{{res.AnswerValue}}</p></div>
                                        <div class="per-box clearfix">
                                            <div>
                                                <el-progress :percentage="parseInt(res.SelectRateString)"></el-progress>
                                            </div>
                                            <span>({{res.SelectNum}})</span>
                                        </div>
                                    </li>
                                </template>
                            </ul>
                            <ul v-if="item.QuestionType==3" class="q3-box">
                                <li class="q3-head">
                                    <span class="q3-name">学员名称</span>
                                    <span class="q3-answer">回答</span>
                                </li>
                                <template v-for="res in item.MemberAnswers">
                                    <li class="q3-body clearfix">
                                        <span>{{res.Username}}</span>
                                        <p>{{res.SubmitAnswer}}</p>
                                    </li>
                                </template>
                            </ul>
                        </template>
                    </div>
                </section>

            </section>
        </section>

        <!--试卷详情查看-->
        <el-dialog
                title="试卷详情"
                :visible.sync="showPaperDetail"
                width="50%"
                center>
            <section class="detail-stu-info fs-14">
                <template v-if="form.Aliasname">
                    <span class="mt20">姓名：{{form.Aliasname}}</span>
                </template>
                <template v-if="!form.Aliasname">
                    <template v-if="form.Username">
                        <span class="mt20">姓名：{{form.Username}}</span>
                    </template>
                </template>
                <span class="mt20">工号：{{form.EmployeeNo}}</span>
                <span class="mt20">公司：{{form.CompanyName}}</span>
                <span class="mt20">手机：{{form.Mobile}}</span>
            </section>
            <section class="detail-stu-score fs-14 mt20">
                <div class="p-relative detail-stu-title">
                    <span class="p-absolute exam-space-linet">考试结果</span>
                    <div class="exam-space-line"></div>
                </div>
                <p class="mt20"><span>得分：{{form.GetScore}}分</span><span class="stu-test-status ml20">{{form.Status}}</span></p>
                <p class="mt20">排名：第{{form.Rank}}名</p>
            </section>
            <section class="mt30">
                <div class="p-relative detail-stu-title">
                    <span class="p-absolute exam-space-linet">试卷</span>
                    <div class="exam-space-line"></div>
                </div>
                <ul>
                    <li class="p-relative mt exam-question " v-for="outer,index in form.Questions">
                        <template  v-if="outer.QuestionType!=3">
                            <div class="question-content mt20">
                                <p class="question-topic">
                                    <span>{{index+1}}</span>
                                    <span v-if="outer.QuestionType==1">【多选题】</span>
                                    <span v-if="outer.QuestionType==2">【单选题】</span>
                                    <span>{{outer.QuestionTitle}}</span>
                                </p>
                                <!-- 选项 -->
                                <div class="examo-one examo-line mt20 clearfix" v-for="one,iIndex in outer.Answers">
                                    <div class="examo-f00">
                                        <el-radio v-model.number="outer.RightAnswerIndexs" :label="iIndex" v-if="outer.QuestionType==2" disabled="true">{{answerArr[iIndex]}}</el-radio>
                                        <template v-if="outer.QuestionType==1">
                                            <label disabeld>
                                                <span class="exam-checkbox grey-check" :class="judgeCheckOn(iIndex, outer.RightAnswerIndexs)?'checked':''"></span>
                                                <span class="grey-txt">{{answerArr[iIndex]}}</span>
                                            </label>
                                        </template>
                                        <span>{{one.AnswerValue}}</span>
                                    </div>
                                </div>
                                <div class="question-down clearfix mt20">
                                    <span class="fs-14 question-down-left fl fs-14">学员回答∶{{outer.SubmitAnswer | filterAnswer}}</span>
                                    <span class="fr">
                                        <img src="http://jhsy-img.caizhu.com/sass/images/correct-icon.png" alt="">
                                        <span class="fs-14 question-down-right">（得{{outer.GetScore}}分）</span>
                                    </span>
                                </div>
                            </div>
                            <div class="p-absolute answers-score">（{{outer.RightScore}}分）</div>
                        </template>
                        <template v-if="outer.QuestionType == 3">
                            <div class="question-content mt20">
                                <p class="question-topic">
                                    <span>{{index+1}}</span>
                                    <span>【问答题】</span>
                                    <span>{{outer.QuestionTitle}}</span>
                                </p>
                                <div class="question-down clearfix mt20">
                                    <span class="fs-14 question-down-left">学员回答∶</span>
                                    <span class="answer-one fs-14">{{outer.SubmitAnswer}}</span>
                                </div>
                            </div>
                        </template>
                    </li>
                </ul>
            </section>


            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showPaperDetail = false">知道了</el-button>
            </span>
        </el-dialog>


    </section>
</template>

<script>

	import qs from 'qs'

	Vue.filter('filterAnswer', n=>{
		var arr =['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
		return arr[n];
	});

	let answerArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];


	export default{
		data: function(){
			return {
				step: 2,
				answerArr:answerArr,
				examStatus: -1, /*0 1 2*/

				//                考试结果
				detailsType:0,
				tabList3:['考试详情','答题分析'],
				resultData:[
					/*{Username:'smile',ExamStatus:0,GetScore:'20分',rank:'2',CostTime:'4秒',SubmitTime:{date:'2017-11-27',time:'18:33:22'} },
					{Username:'smile',ExamStatus:1,GetScore:'20分',rank:'2',CostTime:'4秒',SubmitTime:{date:'2017-11-27',time:'18:33:22'} },
					{Username:'smile',ExamStatus:2,GetScore:'20分',rank:'2',CostTime:'4秒',SubmitTime:{date:'2017-11-27',time:'18:33:22'} },
					{Username:'smile',ExamStatus:3,GetScore:'20分',rank:'2',CostTime:'4秒',SubmitTime:{date:'2017-11-27',time:'18:33:22'} },
					{Username:'smile',ExamStatus:0,GetScore:'20分',rank:'2',CostTime:'4秒',SubmitTime:{date:'2017-11-27',time:'18:33:22'} },*/
				],
				showPaperDetail: false,
				questionRadio: '4',
				ResultList:[
					{choose:'A1次',total:'4次',percent:'80%',correctType:true,percentNum:'100'},
					{choose:'A1次',total:'4次',percent:'100%',correctType:false,percentNum:'100'},
					{choose:'A1次',total:'4次',percent:'50%',correctType:false,percentNum:'50'},
					{choose:'A1次',total:'4次',percent:'60%',correctType:false,percentNum:'60'}
				],
				data2:{},
				examID: 1,  // 考试ID
				percentNum:[],

//                1-8
				HeaderData:{},
				BodyData:{},
				PassScore:'', // 培训详情合格分数
				kindList:['未考','通过','未通过'],
				checkList:[],
				searchContent:'', // 搜索框

                form:{}, /*学员详情*/

                list:[]
            }
		},
		mixins: [mixinMethods],
		methods: {
			statusChange(){
//				alert(this.examStatus);
				this.getExamResult();
            },
            getExamResult(){
				let TrainID = this.$route.query.TrainID;
				let ExamID = this.$route.query.ExamID;

				axios.post('/com/exam/getResult', qs.stringify({
					ExamID : ExamID,  //

//					examStatus: this.checkList.join(','),  // 筛选数据
					examStatus: this.examStatus,
					keywords:this.searchContent,   // 筛选数据


                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.HeaderData = d.data.HeaderData;
                        this.BodyData = d.data.BodyData;
                        this.resultData =  this.BodyData.Rows; // 初始化数据列表
                    }
                } );
            },
			tabDetailActive(a){
				let self = this;
				self.detailsType = a;
			},
            getRightScore(){
					let ExamID = this.$route.query.ExamID;
					let JoinType =  this.$route.query.JoinType;
					axios.post('/com/exam/get', qs.stringify({ // 培训试卷详情
						ExamID : ExamID,
					})).then( (res) => {
						var d = res.data;
						if(d.flag == 1){
							this.PassScore = d.data.PassScore;
							console.log(this.PassScore)
						}else{
							this.$message.error(d.msg);
						}
					} )
            },

			getCheckList(val){  // 模糊匹配
				console.log(val);
				this.getExamResult(val);
			},

            showOneResult(one){ /*查看学员的考试详情*/
				this.showPaperDetail = true;
				/*let d={
					"flag": 1,
					"msg": "",
					"data": {
						"Username": "rick",
						"Aliasname": "",
						"EmployeeNo": "",
						"CompanyName": "yhkj",
						"Mobile": "18621614361",
						"GetScore": "0",
						"Rank": "1",
						"Questions": [
							{
								"ExamQID": "648",
								"QuestionType": "1",
								"QuestionTitle": "公司的企业文化包括下列哪些选项？",
								"RightScore": "5",
								"RightAnswerIndexs": "0,1",
								"SubmitAnswer": "1",
								"IsRight": "0",
								"GetScore": "0",
								"Answers": [
									{
										"AnswerID": "1458",
										"AnswerValue": "谦虚"
									},
									{
										"AnswerID": "1459",
										"AnswerValue": "骄傲"
									},
									{
										"AnswerID": "1460",
										"AnswerValue": "诚实"
									}
								]
							},
							{
								"ExamQID": "649",
								"QuestionType": "3",
								"QuestionTitle": "请对企业做出评价",
								"RightScore": "20",
								"RightAnswerIndexs": "",
								"SubmitAnswer": "1",
								"IsRight": "0",
								"GetScore": "0",
								"Answers": []
							},
							{
								"ExamQID": "650",
								"QuestionType": "2",
								"QuestionTitle": "多选？",
								"RightScore": "10",
								"RightAnswerIndexs": "0",
								"SubmitAnswer": "1",
								"IsRight": "0",
								"GetScore": "0",
								"Answers": [
									{
										"AnswerID": "1461",
										"AnswerValue": "11"
									},
									{
										"AnswerID": "1462",
										"AnswerValue": "22"
									},
									{
										"AnswerID": "1463",
										"AnswerValue": "33"
									}
								]
							},
							{
								"ExamQID": "651",
								"QuestionType": "3",
								"QuestionTitle": "请对企业做出评价",
								"RightScore": "20",
								"RightAnswerIndexs": "",
								"SubmitAnswer": "fhkdsehfjkhdsjh维克托瑞糊涂几个人",
								"IsRight": "0",
								"GetScore": "0",
								"Answers": []
							},
						]
					},
					"extra": {}
				}
				this.form = d.data;
				if(one.ExamStatus == 1){
					this.form.Status = '通过';
                }else if(one.ExamStatus == 2){
					this.form.Status = '未通过';
                }*/
                let ExamID = this.$route.query.ExamID;
				axios.post('/com/exam/getMemberExamResult', qs.stringify({
                       examID:ExamID,
                       employeeID: one.employeeID,
                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
						this.form = d.data;
						if(one.ExamStatus == 1){
							this.form.Status = '通过';
						}else if(one.ExamStatus == 2){
							this.form.Status = '未通过';
						}

                    }else{
                        this.$message.error(d.msg);
                    }
                } );
            },
			judgeCheckOn(index, arr){      // 判断选项多选是否选中
				if(arr.indexOf(index) > -1){
					return true;
				}
				return false;
			},
		},
		mounted: function(){
			this.getExamResult();
			this.getRightScore();

            axios.post('/com/exam/getExamAnalysis', qs.stringify({
                examID:this.$route.query.ExamID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.list = d.data;
                }else {
                    this.$message.error(d.msg)
                }
            })

			var self= this;
			document.onkeydown=function(event){
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode==13){ // enter 键
					self.getExamResult();
				}
			};

		}
	}


</script>